<template>
  <div>
    <input placeholder="输入关键字搜索" v-focus @keyup.enter="find" v-model="value" />
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="showlist">
        <tr v-for="(item,index) in data" :key="index">
          <td>{{item.date}}</td>
          <td>{{item.doctor}}</td>
          <td>{{item.diagnosis}}</td>
          <td>{{item.prescription}}</td>
          <td @click="showDesc(item)" v-focus>详情</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr v-for="(item,index) in findItems" :key="index">
          <td>{{item.date}}</td>
          <td>{{item.doctor}}</td>
          <td>{{item.diagnosis}}</td>
          <td>{{item.prescription}}</td>
          <td @click="showDesc(item)" v-focus>详情</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'PatientsTable',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    show:{

    }
  },
  data() {
    return {
      value: '',
      showlist: true,
    }
  },

  // console.log(
  //   this.data.find((item) => {
  //     return item.doctor === this.value
  //   })
  // ) find方法返回的是符合条件的数据，如果没有查到 就会返回undefined
  computed: {
    findItems() {
      return this.data.filter((item) => item.doctor === this.value)
    },
  },
  methods: {
    find() {
      if (this.findItems.length > 0) {
        this.showlist = false
        // alert('查询成功')
      } else {
        this.showlist = true
        // alert('查询失败')
      }
    },
    showDesc(item){
      this.$emit("showList",item)
    }
  },

  directives: {
    focus: {
      inserted(el) {
        el.focus()
      },
    },
  },
}
</script>

<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>
